<template>
  <div class="app-container">
    <!-- 通知和搜索 -->
    <header class="myheader" :style="{backgroundImage:`url(${merchant_head})`}">
    </header>
    <!--广告轮播位-->
    <article class="adrotation">
      <van-swipe indicator-color="white" class="banner" :autoplay="3000">
        <van-swipe-item v-for="(banner, index) in bannerList" :key="index">
          <img :src="banner.url" @click="redirectTo(banner.link)" />
        </van-swipe-item>
      </van-swipe>
    </article>
    <!--服务类-->
    <section class="mybox">
      <nav>
        <a class="square active">直播间</a>
      </nav>
      <ul v-for="item in list">
        <li>
          <aside class="left" :style="{backgroundImage:`url(${item.picture})`}" @click="linkToplayRoom(item.linkurl)">
            <div class="litte-icon" :style="{backgroundImage: item.is_playing? `url(${pay_openPng})` :`url(${pay_closePng})`}"></div>
          </aside>
          <ul class="right">
            <li v-text="item.title"></li>
            <li>
              <a v-if="true" :style="{backgroundColor:'rgba(39,126,239,.8)'}">直播日期</a>
              <span>{{item['ymd']}}</span>
            </li>
            <li>
              <a v-if="true" :style="{backgroundColor:item.is_playing?'rgba(51,204,51,.8) !important':'rgba(255,0,0,.8) !important'}">直播时间</a>
              <span>{{item['b_time']}} ~ {{item['e_time']}}</span>
            </li>
          </ul>
        </li>
        <div class="divider"></div>
      </ul>
    </section>
  </div>
</template>
<script>
  import {
    List,
    Swipe,
    SwipeItem,
    Tabbar,
    TabbarItem,
    Image,
    Search,
    Toast,
    Card,
    Row,
    Col,
    Tag,
    Tab,
    Tabs,
    Divider,
    Panel,
    Grid,
    GridItem,
    SidebarItem,
    Sidebar,
    Field,
    DropdownMenu,
    DropdownItem,
    Area,
    Collapse,
    CollapseItem,
    Icon,
    Popup

  } from 'vant';
  import {
    getWxConfig,
    getPlayList
  } from '@/api/api';
  import areaList from '@/views/user/module-address-edit/area_all.json';
  import scrollFixed from '@/mixin/scroll-fixed';
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
  import wx from 'weixin-js-sdk';
  import icon_blue from '@/assets/images/merchant/icon_blue.png';
  import icon_red from '@/assets/images/merchant/icon_red.png';
  import icon_yellow from '@/assets/images/merchant/icon_yellow.png';
  import merchant_head from '@/assets/images/merchant/merchant_head.jpg';
  import merchant_join from '@/assets/images/merchant/merchant_join.jpg';
  export default {
    name: '',
    props: [],
    mixins: [scrollFixed],
    data() {
      return {
        //图片素材 begin
        icon_blue: icon_blue,
        icon_red: icon_red,
        icon_yellow: icon_yellow,
        merchant_head: merchant_head,
        merchant_join: merchant_join,
        servicetype: {
          navList: ['服务类', '二手供应'],
          ulList: [{
              'img_url': icon_yellow,
              'img_context': '工具维修',
              'img_link': ''
            },
            {
              'img_url': icon_blue,
              'img_context': '二手供应',
              'img_link': ''
            },
            {
              'img_url': icon_red,
              'img_context': '砂浆喷涂机维护',
              'img_link': ''
            }
          ]
        },
        bannerList: [{
            id: 48,
            name: "热租好物",
            link: "/items/detail/1181057",
            url: "https://santu-dev.oss-cn-shanghai.aliyuncs.com/af8e8rsqrqb41vzeyrh4.jpg",
            position: 6,
            content: "抢先租",
            memberPrice: 0.00,
            enabled: true,
            addTime: "2020-03-17 08:40:39",
            updateTime: "2020-05-22 14:03:48",
            deleted: false
          },
          {
            id: 48,
            name: "热租好物",
            link: "/items/category?itemClass=1036019",
            url: "https://santu-dev.oss-cn-shanghai.aliyuncs.com/ua8p59e73rp6w3nbbwl0.jpg",
            position: 6,
            content: "抢先租1",
            memberPrice: 0.00,
            enabled: true,
            addTime: "2020-03-17 08:40:39",
            updateTime: "2020-05-22 14:03:48",
            deleted: false
          },
        ],
        // 新增编辑界面数据
        dataForm: {},
        activeName: ['1'],
        searchValue: '',
        img: 'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/wgme7a0tguy7h4g1g4sr.png',
        list: [],
        query: {
          shopAddress: undefined
        },
        pay_closePng: 'https://xintu361.oss-cn-qingdao.aliyuncs.com/l0q7lct79oar8r725jq3.jpg',
        pay_openPng: 'https://xintu361.oss-cn-qingdao.aliyuncs.com/xivrsltghyg7ykxik3dl.gif',
        //定时器
        Interval: undefined,
      };
    },
    computed: {},
    watch: {},
    created() {
      this.init(

      )
    },
    mounted() {},
    methods: {
      init() {
        this.getList()
        //每分钟刷新一次
        if (this.Interval) {
          window.clearInterval(this.Interval)
        }
        this.Interval = setInterval(() => {
          this.getList()
        }, 1000 * 60)

      },
      redirectTo(link) {
        if (link == null || link == '' || link == undefined) {
          return;
        }
        if (link.indexOf('http') != -1) {
          window.location.href = link;
          return;
        }
        this.$router.push({
          path: link
        });
      },
      showPopup() {

      },
      seaech() {},
      //获取渲染数据
      getList() {
        getPlayList({
          page: '1',
          limit: '100000'
        }).then((res) => {
          if (!res.data.data.list) {
            return
          }
          let list = res.data.data.list
          let myDate1, myDate2, ymd1, ymd2, isTomorrow = false,
            isPlaying = false,
            b_hour, b_minute, e_hour, e_minute, bTime, eTime
          list.filter(item => {
            myDate1 = new Date(item.beginTime)
            myDate2 = new Date(item.endTime)
            ymd1 = myDate1.getFullYear() + '/' + (myDate1.getMonth() + 1) + '/' + myDate1.getDate()
            ymd2 = myDate2.getFullYear() + '/' + (myDate2.getMonth() + 1) + '/' + myDate2.getDate()
            isTomorrow = false
            b_hour = myDate1.getHours()
            b_minute = myDate1.getMinutes()
            e_hour = myDate2.getHours()
            e_minute = myDate2.getMinutes()
            if (b_hour < 10) {
              b_hour = '0' + b_hour
            }
            if (b_minute < 10) {
              b_minute = '0' + b_minute
            }
            if (e_hour < 10) {
              e_hour = '0' + e_hour
            }
            if (e_minute < 10) {
              e_minute = '0' + e_minute
            }
            item['ymd'] = ymd1
            item['b_time'] = b_hour + ':' + b_minute
            item['e_time'] = e_hour + ':' + e_minute
            if (ymd1 != ymd2) {
              isTomorrow = true
            }
            item['is_tomorrow'] = isTomorrow
            //判断当前时间是否在直播时间内
            let today = new Date(); //创建标准格式的当前时间
            bTime = new Date(item.beginTime.replace("-", "/")); //用replace替换原时间字符串，然后传给new Date
            eTime = new Date(item.endTime.replace("-", "/"));
            if (today > bTime && today < eTime) {
              isPlaying = true
            }
            item['is_playing'] = isPlaying
            return item
          });
          this.list = list
        })
      },
      //跳转到直播间
      linkToplayRoom(link) {
        //link = 'http://activity.renren.com/live/liveroom/963106794_2917752?c1=6076&c2=0001&c3=1&c4=6076&from_uid=&isFull=1&QRCodeRecharge='
        let link_alternate = link
        if (link.indexOf('http') == -1) {
          link = 'https://' + link
          link_alternate = 'http://' + link_alternate
        }
        console.log(link)
        window.location.href = link //优先跳转https网页因为这样更安全
        window.location.href = link_alternate
      },
    },
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Card.name]: Card,
      BaiduMap,
      [Field.name]: Field,
      [Area.name]: Area,
      [Icon.name]: Icon,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [Divider.name]: Divider,
      [Search.name]: Search,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [Popup.name]: Popup,
    },
  };

</script>
<style lang="scss" scoped>
  /**方形图标 */
  .square::before {
    color: #1B91FE;
    content: '▍';
  }

  .active {
    color: rgb(0, 0, 0);
    font-weight: bolder;
  }

  /**分割快 */
  .divider {
    display: block;
    width: 100%;
    height: 10px;
    min-width: 50px;
    margin: 0 auto;
    background-color: rgba(242, 242, 242, 1);
  }

  /**分割线 */
  .line {
    width: 100%;
    height: 1px;
    background-color: rgba(125, 125, 125, .2);
    transform: scale(1, 0.5);
  }

  .myheader {
    background-size: 100% 100%;
    height: 185px;
    background-repeat: no-repeat;
    position: relative;

    >ul {
      height: 40px;
      padding: 0 16px;
      display: flex;
      transform: translateY(50%);

      li:nth-of-type(1) {
        width: 100px;

        .van-dropdown-menu {
          box-sizing: border-box;
          border-top-left-radius: 20px;
          height: 100%;
          background-color: transparent;
          border-bottom-left-radius: 20px;
          border: 1px solid #4570CE;

          /deep/.van-dropdown-menu__title {
            color: rgb(255, 255, 255) !important;
          }
        }
      }

      li:nth-of-type(2) {
        flex: 1;

        .van-search {
          padding: 0 12px;
          height: 100%;
          background-color: transparent !important;
          padding: 0 0px;

          .van-search__content {
            align-items: center;
            height: 100%;
            flex: 1;
            padding-left: 8px;
            background-color: transparent;
            border: 1px solid #4570CE;
            box-sizing: border-box;
            border-left-width: 0px;
          }

          /deep/ .van-field__control {
            color: rgb(255, 255, 255) !important;
          }

        }
      }

      li:nth-of-type(3) {
        border: 1px solid #4570CE;
        width: 40px;
        height: 40px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        box-sizing: border-box;
        border-left-width: 0px;
        align-items: center;
        justify-content: center;
        display: flex;
        color: white;
        cursor: pointer;
        font-size: 16px;
      }
    }

    .van-popup {
      margin-top: 60px;
    }
  }

  .adrotation {
    height: 160px;
    padding: 0 16px;
    transform: translateY(-70%);

    .van-swipe {
      height: 100%;
      width: 100%;
      border-radius: 10px;
    }

    .van-swipe-item img {
      width: 100%;
      height: 100%;

    }
  }

  .servicetype {
    margin-top: -100px;
    background-color: rgb(255, 255, 255);

    li,
    li a {
      cursor: pointer;
    }

    .mycard {

      ul,
      nav {
        padding: 0 16px;
      }

      nav {
        display: flex;
        height: 30px;
        align-items: center;

        a {
          display: block;
          margin-right: 20px;
          color: #5B5B5B;
        }

      }

      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: center;

        li {
          width: 5rem;
          height: 5rem;

          p {
            margin: 0 0;
            padding: 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          p:nth-of-type(1) {
            height: 4rem;

            img {
              width: 4rem;
              height: 4rem;
              transform: scale(.85);
            }
          }

          p:nth-of-type(2) {
            overflow: hidden;
            white-space: nowrap;
            height: 1rem;
          }
        }
      }
    }
  }

  .article {
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100px;

    span {
      transform: scale(.7);
      border-radius: 50%;
      width: 100Px;
      height: 100px;
      position: absolute;
      display: block;
      right: 0;
      z-index: 1;
    }
  }

  .mybox {
    margin-top: -80px;
    background-color: white;

    nav {
      display: flex;
      height: 30px;
      align-items: center;
      padding: 0 16px;

      a {
        display: block;
        margin-right: 20px;
        color: #5B5B5B;
        transform: scale(1.1);
      }
    }

    ul {
      >li {
        height: 100px;
        width: 100%;
        padding: 0 16px;
        margin: 16px 0;
        display: flex;

        .left {
          background-color: #1E7BF4;
          background-size: 100% 100%;
          width: 100px;
          height: 100px;
          background-repeat: no-repeat;
          box-sizing: border-box;
          box-shadow: 2.5px 2.5px 5px;
          position: relative;

          div.litte-icon {
            background-size: 100% 100%;
            width: 35px;
            height: 35px;
            position: absolute;
            bottom: 0;
            right: 0;
            background-repeat: no-repeat;

          }
        }

        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          position: relative;

          >li {
            flex: 1;
            display: flex;
            align-items: center;
            padding-right: 32px;
            margin: 0
          }

          >li:nth-of-type(1) {
            font-size: 15px;
            font-weight: bold;
          }

          >li:nth-of-type(2) {
            a {
              display: block;
              height: 20px;
              line-height: 20px;
              color: white;
              padding: 0 6px;
              margin-right: 16px;
              background-color: rgba(255, 0, 0, .6) !important;
            }
          }

          >li:nth-of-type(3) {
            a {
              display: block;
              height: 20px;
              line-height: 20px;
              color: white;
              padding: 0 6px;
              margin-right: 16px;
              //background-color: rgba(255, 0, 0, .7) !important;
            }
          }
        }
      }

      div.divider {
        height: 8px;
      }
    }
  }

</style>
